<div class="info">
	<div class="item-content">
		Dynamic Search plugin helps you to search through the contents of a HTML Table. Once the plugin is associated with a Table, the search box can be shown
		by pressing Ctrl + Alt + S key combination. There are two modes of searching through the contents of the table, highlight and toggle. Highlight is the
		default search mode. It highlights the rows it finds a match with your search term. On the other hand toggle mode only shows the rows that match the 
		search term. If there is no match for the search term it removes all the rows and displays a 'No matches found.' message. You can close the search box 
		simply by pressing the Esc key.
		*** This plugin uses the Component Reposition plugin to position the search box with respect to the table.
	</div>

	<div class="item-content-info">
		<div class="info-item">
			Access Dynamic Search plugin by using the global variable dynamicSearch. It exposes only initialize method that takes a config object and sets up 
			the search box functionality.<br/><br/>
			API:<br/>
			-<span class="indent4px">initialize(object config)</span>
		</div>
		
		<table class="indent4px info-item">
			<tr valign="top">
				<th>Parameter</th>
				<th class="nowrap">Parameter Type</th>
				<th class="nowrap">Default Value</th>
				<th>Description</th>
			</tr>
			<tr valign="top">
				<td>config</td>
				<td class="nowrap">JSON</td>
				<td class="nowrap">-</td>
				<td>The config object is not mandatory but can be overridden with custom values for the properties it holds. It includes the properties to be 
				applied to the Component Reposition plugin as well. All the properties of the config are explained below.</td>
			</tr>
			<tr valign="top">
				<td colspan="4"><u>config properties</u></td>
			</tr>
			<tr valign="top">
				<td class="nowrap"><span class="indent4px">-</span><span class="indent4px">relativeTo</span></td>
				<td class="nowrap">String</td>
				<td class="nowrap">#apply-dynamic-search</td>
				<td>The value for this property needs to be CSS selector of the Table to which this plugin has to be applied to.</td>
			</tr>
			<tr valign="top">
				<td class="nowrap"><span class="indent4px">-</span><span class="indent4px">searchBoxPosition</span></td>
				<td class="nowrap">String</td>
				<td class="nowrap">top</td>
				<td>This argument is optional, if nothing is passed then 'top' position is taken as the default. However, it can have the 
				following values 'top' / 'right' / 'bottom' / 'left' / 'top-right' / 'bottom-right' / 'bottom-left' / 'top-left'.</td>
			</tr>
			<tr valign="top">
				<td class="nowrap"><span class="indent4px">-</span><span class="indent4px">searchBoxMargins</span></td>
				<td class="nowrap">Array</td>
				<td class="nowrap">null</td>
				<td>This argument is optional, nothing happens if it is not passed. However, you need to pass the margins as per the CSS rules.
				For instance it can be [20,10,-10,-20] where it will be interpreted as 20px top-margin, 10px right-margin, -10px bottom-margin,
				-20px left-margin.</td>
			</tr>
			<tr valign="top">
				<td class="nowrap"><span class="indent4px">-</span><span class="indent4px">searchCmpId</span></td>
				<td class="nowrap">String</td>
				<td class="nowrap">dynamic-search-container</td>
				<td>This argument is optional. It is the Id of the Search Box Container. Change this only if there is a clash with id's or if
				you want a specific Id.</td>
			</tr>
			<tr valign="top">
				<td class="nowrap"><span class="indent4px">-</span><span class="indent4px">searchInputId</span></td>
				<td class="nowrap">String</td>
				<td class="nowrap">dynamic-search-text</td>
				<td>This argument is optional. It is the Id of the input text of Search Box. Change this only if there is a clash with id's or
				if you want a specific Id.</td>
			</tr>
			<tr valign="top">
				<td class="nowrap"><span class="indent4px">-</span><span class="indent4px">searchContainerCls</span></td>
				<td class="nowrap">String</td>
				<td class="nowrap">blank string</td>
				<td>This argument is optional. Add this value if you want to apply cosmetic changes to the Search Box container.</td>
			</tr>
			<tr valign="top">
				<td class="nowrap"><span class="indent4px">-</span><span class="indent4px">events</span></td>
				<td class="nowrap">Array</td>
				<td class="nowrap">['keyup', 'focus']</td>
				<td>This argument is optional. It is used to apply various events to the Dynamic Search plugin.</td>
			</tr>
		</table>
		
		<div class="info-item">
			Usage:&nbsp;<span class="demo x-dynamicSearch">Demo</span><br/>
<pre>
	dynamicSearch.initialize({
		relativeTo: '#dynamic-search-content',
		searchBoxPosition: 'bottom',
		searchBoxMargins: [-1,0,0,2] 
	});
</pre>
		</div>
		
		<div class="info-item">
			Download:<br/>
			-<span class="indent4px">
				<a href="DynamicSearch/plugin/dynamic-search-plugin.js" target="_blank">dynamic-search-plugin.js</a>
			</span><br/>
			-<span class="indent4px">
				<a href="ComponentReposition/plugin/component-reposition-plugin.js" target="_blank">component-reposition-plugin.js</a>
			</span>
		</div>
		
		<div class="info-item">
			Tags:<br/>
			-<span class="indent4px">jQuery plugin</span>
		</div>
	</div>
</div>